<template>
  <view
    class="he-load-more-wrap"
    :style="{
      backgroundColor: bgColor,
      marginBottom: marginBottom + 'rpx',
      marginTop: marginTop + 'rpx',
      height: $h.addUnit(height)
    }"
  >
    <he-line color="#d4d4d4" length="50"></he-line>
    <!-- 加载中和没有更多的状态才显示两边的横线 -->
    <view :class="status == 'loadmore' || status == 'nomore' ? 'he-more' : ''" class="he-load-more-inner">
      <view class="he-loadmore-icon-wrap">
        <he-loading
          class="he-loadmore-icon"
          :color="iconColor"
          :mode="iconType == 'circle' ? 'circle' : 'flower'"
          :show="status == 'loading' && icon"
        ></he-loading>
      </view>
      <!-- 如果没有更多的状态下，显示内容为dot（粗点），加载特定样式 -->
      <view
        class="he-line-1 he-load-text"
        :style="[loadTextStyle]"
        :class="[status == 'nomore' && isDot == true ? 'he-dot-text' : 'he-more-text']"
        @tap="loadMore"
      >
        {{ showText }}
      </view>
    </view>
    <he-line color="#d4d4d4" length="50"></he-line>
  </view>
</template>

<script>
import heLine from './he-line.vue';
import heLoading from './he-loading.vue';

export default {
  name: 'he-load-more',
  components: {
    heLine,
    heLoading
  },
  props: {
    // 组件背景色
    bgColor: {
      type: String,
      default: 'transparent'
    },
    // 是否显示加载中的图标
    icon: {
      type: Boolean,
      default: true
    },
    // 字体大小
    fontSize: {
      type: String,
      default: '26'
    },
    // 字体颜色
    color: {
      type: String,
      default: '#999999'
    },
    // 组件状态，loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
    status: {
      type: String,
      default: 'loadmore'
    },
    // 加载中状态的图标，flower-花朵状图标，circle-圆圈状图标
    iconType: {
      type: String,
      default: 'flower'
    },
    // 显示的文字
    loadText: {
      type: Object,
      default() {
        return {
          loadmore: '加载更多',
          loading: '加载中..',
          nomore: '没有更多了'
        };
      }
    },
    // 在“没有更多”状态下，是否显示粗点
    isDot: {
      type: Boolean,
      default: false
    },
    // 加载中显示圆圈动画时，动画的颜色
    iconColor: {
      type: String,
      default: '#b7b7b7'
    },
    // 上边距
    marginTop: {
      type: [String, Number],
      default: 10
    },
    // 下边距
    marginBottom: {
      type: [String, Number],
      default: 10
    },
    // 高度，单位rpx
    height: {
      type: [String, Number],
      default: 'auto'
    }
  },
  data() {
    return {
      // 粗点
      dotText: '●'
    };
  },
  computed: {
    // 加载的文字显示的样式
    loadTextStyle() {
      return {
        color: this.color,
        fontSize: this.fontSize + 'rpx',
        position: 'relative',
        zIndex: 1,
        backgroundColor: this.bgColor
        // 如果是加载中状态，动画和文字需要距离近一点
      };
    },
    // 加载中圆圈动画的样式
    cricleStyle() {
      return {
        borderColor: `#e5e5e5 #e5e5e5 #e5e5e5 ${this.circleColor}`
      };
    },
    // 显示的提示文字
    showText() {
      let text = '';
      if (this.status === 'loadmore') text = this.loadText.loadmore;
      else if (this.status === 'loading') text = this.loadText.loading;
      else if (this.status === 'nomore' && this.isDot) text = this.dotText;
      else text = this.loadText.nomore;
      return text;
    }
  },
  methods: {
    loadMore() {
      // 只有在“加载更多”的状态下才发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
      if (this.status === 'loadmore') this.$emit('loadmore');
    }
  }
};
</script>

<style scoped>
/* #ifdef MP */
u-line {
  flex: none;
}

/* #endif */

.he-load-more-wrap {
  display: flex;

  justify-content: center;
  align-items: center;
}

.he-load-more-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
}

.he-more {
  position: relative;
  display: flex;
  justify-content: center;
}

.he-dot-text {
  font-size: 28px;
}

.he-loadmore-icon-wrap {
  margin-right: 8px;
}

.he-loadmore-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.he-load-text {
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 1.3;
}
</style>
